<template>
<div class="container">
	
	<nav class="navbar navbar-default">
	  <div class="container-fluid">
		<div class="navbar-header">
		  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		  </button>
		  <a class="navbar-brand" href="#/"><img src="../assets/img/logo.png" class="img-rounded" width="50px"/></a>
		</div>
	
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		  <ul class="nav navbar-nav">
			<li><a href="#">中软国际 <span class="sr-only">(current)</span></a></li>
		  </ul>
		  <ul class="nav navbar-nav navbar-right">
			<li><a  data-toggle="modal" data-target="#myLogin">{{loginName}}</a></li>
			<li><a  data-toggle="modal" data-target="#myRegister">注册</a></li>
		  </ul>
		</div>
	  </div>
	</nav>

	
	<div class="row">
		<div class="col-md-1 col-md-offset-1 col-sm-4 col-xs-4">
			人才测评
		</div>
		<div class="col-md-1 col-md-offset-3 col-sm-4 col-xs-4">
			<div class="row">
				<div id="business" class="col-md-5">
					<router-link to="/ProductCatalog">企业</router-link>
				</div>
				<div class="col-md-7">
					<span class="fa fa-angle-down"></span>
					<div id="business-show-info">
						<div>
							<div id="tab_left">
								<div class="tab-item">
									<router-link to="/Solution">
									<span class="fa fa-comments-o" style="padding-right:10px"></span>解决方案
									</router-link>
								</div>
								<div class="tab-item">
									<router-link to="/ProductCatalog">
									<span class="fa fa-list" style="padding-right:10px"></span> 产品目录	
									</router-link>
								</div>
							</div>
							<div id="tab_right">
								
								<div class="main">
									<img src="../assets/img/t1.png" height="98%">
								</div>
								<div class="main">
									<img src="../assets/img/t2.png" height="98%">
								</div>
								
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-1 col-sm-4 col-xs-4">
			<router-link to="/Oneself">
			个人
			</router-link>
		</div>
	</div>

	
	<div class="row">
		<div class="col-md-12">
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
			  <ol class="carousel-indicators">
				<li  v-for="(item, index) in blist" :key="index" :class="{active: index == 0}" data-target="#carousel-example-generic" :data-slide-to="index"></li>
			  </ol>
			  <div class="carousel-inner" role="listbox">
				<div v-for="(item, index) in blist" :key="index" :class="{'active': index == 0, item: true}">
					<img :src="item.imgpath2" alt="..." style="width:100%">
					<div class="carousel-caption">
						<h3>{{item.title}}</h3>
					</div>
				</div>
			  </div>
			
			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			  </a>
			</div>
		</div>
	</div>

	
	<div class="row">
		<div class="col-md-12 row_style">
			<div>
				<h2>人才评估</h2>
				<p>从五大版块的角度展示人才评估的内容和特点</p>
				<router-link to="ProductReservation"><input type="button" id="show-product" class="btn btn-primary" value="预约产品演示" /></router-link>
			</div>
		</div>
	</div>

	
	<div class="row">
		<div class="col-md-12 row_style">
			<div>
				<div class="row">
					<div class="col-md-3">
						<h3>专业技能</h3>
						<p>着眼于IT技能产品介绍</p>
						<a href="">着眼于IT技能产品介绍</a>
					</div>
					<div class="col-md-9">
						<!--小轮播图信息-->
						<div class="ban_bd">
							<ul>
								<li>
									<a target="_blank" href="http://www.chinasofti.com">
										<div class="ban-img">
											<img src="../assets/img/c1.jpg" />
										</div>
										<div class="text">
											<h4>java开发基础</h4>                                               </p>
											<span>MORE</span>
										</div>
									</a>
								</li>
								<li>
									<a target="_blank" href="http://www.chinasofti.com">
										<div class="ban-img">
											<img src="../assets/img/c1.jpg" />
										</div>
										<div class="text">
											<h4>java开发基础</h4>
											<span>MORE</span>
										</div>
									</a>
								</li>
								<li>
									<a target="_blank" href="http://www.chinasofti.com">
										<div class="ban-img">
											<img src="../assets/img/c1.jpg" />
										</div>
										<div class="text">
											<h4>java开发基础</h4>
											<span>MORE</span>
										</div>
									</a>
								</li>
							</ul>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>

	
	<div class="row">
		<div class="col-md-12 row_style">
			<div>
				<h2>岗位胜任力</h2>
				<p>从市场角度建立岗位胜任力模型</p>
				<p>了解更多岗位胜任力</p>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-12 row_style">
			<div>
				<h2>实践认证</h2>
				<p>从市场角度，提供行业领先专业认证，情景模拟认证考试</p>
				<p>了解更多实践认证</p>
			</div>
		</div>
	</div>
<div class="modal fade" id="myLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
	<div class="modal-content">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		<h4 class="modal-title" id="myModalLabel">用户登录</h4>
	  </div>
	  <div class="modal-body">
			<form class="form-horizontal">
			  <div class="form-group">
				<label for="uname" class="col-md-2 control-label">用户名</label>
				<div class="col-md-9">
				  <input type="text" class="form-control" id="uname" placeholder="请输入用户名" v-model="uname">
				</div>
			  </div>
			  <div class="form-group">
				<label for="psd" class="col-md-2 control-label">密码</label>
				<div class="col-md-9">
				  <input type="password" class="form-control" id="psd" placeholder="请输入密码" v-model="psd">
				</div>
			  </div>
			  
			</form>
	  </div>
	  <div class="modal-footer">
		<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		<button type="button" class="btn btn-primary" @click="login">提交</button>
	  </div>
	</div>
  </div>
</div>

<div class="modal fade" id="myRegister" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
	<div class="modal-content">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		<h4 class="modal-title" id="myModalLabel">用户注册</h4>
	  </div>
	  <div class="modal-body">
			<form class="form-horizontal">
			  <div class="form-group">
				<label for="uname" class="col-md-2 control-label">用户名</label>
				<div class="col-md-9">
				  <input type="text" class="form-control" id="uname" placeholder="请输入用户名" v-model="uname">
				</div>
			  </div>
			  <div class="form-group">
				<label for="psd" class="col-md-2 control-label">密码</label>
				<div class="col-md-9">
				  <input type="password" class="form-control" id="psd" placeholder="请输入密码" v-model="psd">
				</div>
			  </div>
			  <div class="form-group">
				<label for="phone" class="col-md-2 control-label">电话</label>
				<div class="col-md-9">
				  <input type="text" class="form-control" id="phone" placeholder="请输入电话" v-model="phone">
				</div>
			  </div>
			</form>
	  </div>
	  <div class="modal-footer">
		<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		<button type="button" class="btn btn-primary" @click="register">提交</button>
	  </div>
	</div>
  </div>
</div>

</div>



</template>
<script>
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
import {baseUrl} from '../util/global.js'

$(function(){
	$("#business-show-info").parent().on("mouseover",function(){
		$(this).find("#business-show-info").stop().slideDown();
		$(this).find("span")[0].className="fa fa-angle-up";
	});
	$("#business-show-info").parent().on("mouseout",function(){
		$(this).find("#business-show-info").stop().slideUp();
		$(this).find("span")[0].className="fa fa-angle-down";
	});
	$("#tab_left .tab-item").mouseenter(function () {
		$(this).addClass("active").siblings().removeClass("active");
		var idx=$(this).index();
		$("#tab_right .main").eq(idx).addClass("selected").siblings().removeClass("selected");
		console.log("测试",$("#tab_right .main").eq(idx).html());
	});
})
export default {
    name: 'FirstPage',
	created() {
		this.getAllBanner()
		
	},
	mounted() {
$("#business-show-info").parent().on("mouseover",function(){
		$(this).find("#business-show-info").stop().slideDown();
		$(this).find("span")[0].className="fa fa-angle-up";
		});
		$("#business-show-info").parent().on("mouseout",function(){
			$(this).find("#business-show-info").stop().slideUp();
			$(this).find("span")[0].className="fa fa-angle-down";
		});
		$("#tab_left .tab-item").mouseenter(function () {
			$(this).addClass("active").siblings().removeClass("active");        
			var idx=$(this).index();        
			$("#tab_right .main").eq(idx).addClass("selected").siblings().removeClass("selected");
			console.log("测试",$("#tab_right .main").eq(idx).html());
		});
	},
    methods: {
        login:function() {
			let that = this;
			if(that.uname == ""){
				alert("用户名不能为空");
			}
			if(that.psd == ""){
				alert("密码不能为空");
			}
            $.get(baseUrl+"/login", {uname:that.uname,psd:that.psd}, function(data){
                console.log("测试数据",data);
				if(data.flag == "success"){
					$("#myLogin").modal('hide');
					alert("登录成功");
					localStorage.setItem("name",data.user.uname);
     				that.loginName = data.user.uname;
				}else{
					alert("用户名密码错误！");
				}
            }, 'json')
        },
		register:function(){
			let that = this;
			
            $.get(baseUrl+"/register", {uname:that.uname,psd:that.psd,phone:that.phone}, function(data){
                console.log("测试数据",data);
				if(data.flag == "success"){
					$("#myRegister").modal('hide');
					alert("注册成功");
				}else{
					alert("注册失败！");
				}
            }, 'json')
		},
		getAllBanner() {
			let that = this
			$.get(baseUrl+"/getBanner.action", {modid: '1'}, function(data) {
				that.blist = data.data
			}, 'json')
			if(localStorage.getItem("name") != null){
				that.loginName = localStorage.getItem("name");
			}else{
				that.loginName = "登录";
			}
		}
    },
    data () {
        return {
            uname:this.uname,
			psd:this.psd,
			phone:this.phone,
			blist: [],
			loginName:"登录"
        }
    }
}
</script>

<style scoped>
    .main{
		width:600px;
		height:200px;
		display:none !important;
		position:absolute;
		left:5px;
	}
	.selected{
		display:block !important;
	}
	#tab_left{
		width:160px;
		height:100px;
		float:left;
	}
	#tab_right{
		width:600px;
		height:200px;
		float:left;
		position:relative;
	}
	.tab-item{
		width:100%;
		height:50px;
		line-height:50px;
	}
	.active{
		background-color:#169bd5;
		color:white;
	}
	body{
		font-size: 14px;
	}
	.navbar-brand{
		padding:8px 10px;
	}
	.navbar-default{
		background-color: white;
		border-radius: 0;
		border: 0px;
		border-bottom: 1px solid #ccc;
	}
	#business,#business~div{
		padding: 0px;
	}
	#business~div{
		font-size: 18px;
		margin-top: -3px;
		cursor: pointer;
		position: relative;
	}
	#business-show-info{
		position: absolute;
		display: none;
		width: 800px;
		height: 200px;
		background-color: white;
		left:-350px;
		/*top:30px;*/
		border: 1px solid #ccc;
		z-index: 999;
	}
	.row_style>div{
		height: 190px;
		text-align: center;
		line-height: 40px;
		border: 1px solid #ccc;
		margin-top: 20px;
		
	}
	.carousel-inner img{
		min-height: 273px;
		max-height: 273px;
		height: 273px;
	}
	.ban_bd{
		width: 100%;
		height: 170px;
		overflow: hidden;
		margin: 10px auto;
	}
	.ban_bd li a{
		text-decoration: none;
	}
	.ban_bd li {
		width: 31.33%;
		height: 165px;
		overflow: hidden;
		float: left;
		margin-left: 1%;
		border-radius: 5%;
		box-shadow: 0 0 0.2rem #ccc
	}
	.ban_bd li:hover {
		box-shadow: 0 0 0.6rem rgba(0,78,162,.5)
	}
	.ban_bd li .ban-img {
	  width: 100%;
	  height: 10rem;
	  overflow: hidden;
	}
</style>